<template>
	<div class="assetAdminList" v-loading="assetAdminListLoading">
		<div class="title">库存信息</div>
		<div class="searchBox">
      <el-form ref="form" :model="searchForm" size="mini" inline>
				<el-form-item label="水站名称">
					<el-select v-model="searchForm.stationName" placeholder="请选择水站名称" :clearable="true">
          <p v-for="(item, index) of stationList" :key="index">
            <el-option :label="item" :value="item"></el-option>
          </p>
        </el-select>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" style="margin-left: 15px;" class="greenBtn" size="mini" @click="onSubmit">确定</el-button>
				</el-form-item>
      </el-form>
    </div>

		<div class="mhr"></div>

		<div class="tableBox">
			<el-table
				:data="assetAdminList"
				size="mini"
				border
				style="width: 100%"
				:header-cell-style="{color: '#454545', background: '#f1f0f3'}"
			>
				<el-table-column
					prop="stationName"
					label="站房名称"
					align="center"
					fixed="left"
					>
				</el-table-column>
				<el-table-column
					prop="distributionSystemCount"
					label="采配水系统 /套"
					align="center"
					>
				</el-table-column>
				<el-table-column
					prop="pretreatmentSystemCount"
					label="预处理系统 /套"
					align="center"
					>
				</el-table-column>
				<el-table-column
					prop="instrumentationCount"
					label="仪器仪表 /套"
					align="center"
					>
				</el-table-column>
				<el-table-column
					prop="controlSystemCount"
					label="控制系统 /套"
					align="center"
					>
				</el-table-column>
				<el-table-column
					prop="airConditioningCount"
					label="空调 /台"
					align="center"
					>
				</el-table-column>
				<el-table-column
          type="expand"
          label="备件耗材"
					width="100"
          align="center">
          <template slot-scope="scope">
						<div v-if="scope.row.consumableCount.length > 0">
							<el-form label-position="left" inline class="tableExpand">
								<el-form-item v-for="(item, index) of scope.row.consumableCount" :key="index" :label="item.name + ':'">
									<span>{{ item.storageCount }}</span>
								</el-form-item>
							</el-form>
						</div>
						<div v-else>
							<h2 style="width: 30%;text-align: center;">备件耗材：无数据</h2>
						</div>
          </template>
        </el-table-column>
			</el-table>
		</div>
	</div>
</template>
<script>
import { mapActions, mapGetters} from "vuex"
export default {
  name: 'assetAdminList',
  data () {
    return {
			msg: 'hello assetAdminList!',
			assetAdminListLoading: false,
			searchForm: {
				stationName: '',
			},
		}
  },
	methods: {
		...mapActions([
			'fetchAssetAdminList'
		]),
		async onSubmit() {
			this.assetAdminListLoading = true
			await this.fetchAssetAdminList(this.searchForm)
			this.assetAdminListLoading = false
		}
	},
	created() {
		this.onSubmit()
	},
	computed: {
    ...mapGetters({
			stationList: 'getStationList',
			assetAdminList: 'getAssetAdminList'
    })
  },
}
</script>
<style scoped>

.assetAdminList {
	position: relative;
	padding: 0 20px 0 20px;
  min-height: 100%;
	background: #fff;
}
.assetAdminList .title {
	position: relative;
	left: 16px;
  line-height: 70px;
  font-size: 16px;
}
.assetAdminList .title::before {
  content: '';
  position: absolute;
  left: -15px;
  width: 4px;
  height: 20px;
  top: 25px;
  background-color: #2399ff;
}
.assetAdminList .mhr {
	height: 1px;
	width: 100%;
	border-bottom: 1px dashed #dcdce0;
}

.searchBox {
	margin-bottom: 25px;
}
.tableBox {
	margin-top: 35px;
}
.tableBox .subHead {
	background: #fff !important;
}
.tableExpand .el-form-item{
	margin-right: 0;
	margin-bottom: 0;
	width: 30%;
	text-align: center;
}

</style>
<style>
.assetAdminList .tableBox .subHead {
	background: #fff;
}
.assetAdminList .tableExpand label{
	width: 90px;
	color: #99a9bf;
}
</style>
